<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>任务5:护工个人主页——一个最常见的移动端页面</title>
    <link rel="stylesheet" href="css/task5.css">
</head>

<body>
    <!-- 头部部分：返回按钮、个人主页标题，在视口固定 -->
    <header>
        <!-- 使用字符实体表示小于号 -->
        <a href="#">&#60;</a>
        <span>个人主页</span>
    </header>
    <!-- 主体部分：个人信息 -> 个人头像、姓名、年龄、坐标图像、地址、整个个人信息背景图 -->
    <main>
        <div class="per-info">
            <!-- <div class="bg-img"></div> -->
            <div class="avatar">
                <span class="avatar-img"></span>
            </div>
            <div class="info">
                <div class="info-top">
                    <span>徐士林&#160;&#160;&#160;55岁</span>
                </div>
                <div class="info-bottom">
                    <span class="location"></span>
                    <span>京城·四方·报纸林</span>
                </div>
            </div>
        </div>
        <div class="skill-info">
            <div class="header">
                <div></div>
                <div>专业技能</div>
            </div>
            <!-- 左侧缩进部分 -->
            <div class="main">
                <div>
                    <div>住家</div>
                    <div></div>
                    <div>不含餐</div>
                </div>
                <div>
                    <div>从业年限</div>
                    <div></div>
                    <div>0~3年</div>
                </div>
                <div>
                    <div>工作时间</div>
                    <div></div>
                    <div>全天</div>
                </div>
                <div>
                    <div>服务价格</div>
                    <div></div>
                    <div>25元/小时</div>
                </div>
                <div>
                    <div>自我介绍</div>
                    <div></div>
                    <div>可以洗衣、做饭、照顾老人。在护工方面有5年工作经验，经验丰富。</div>
                </div>
            </div>
        </div>
    </main>
    <!-- 底部部分：留言和电话联系按钮，在视口固定 -->
    <footer>
        <button id="btn-left">留言</button>
        <button id="btn-right">电话联系</button>
    </footer>
</body>

</html>